<script setup>
import { ref } from 'vue'
const props = defineProps({
    list: {
        type: Object,
        required: true,
        default: () => ({})
    }
})

const title = ref('预警信息')
const head = ref([
    {
        name: '序号',
        width: '50px'
    },
    {
        name: '预警时间',
        width: '60px'
    },
    {
        name: '预警内容',
        width: '200px'
    },
    {
        name: '处理结果',
        width: '60px'
    }
])
</script>

<template>
    <div class="com-bottom-card">
        <div class="com-card-head">
            <h1>{{ title }}</h1>
        </div>
        <div class="com-table-head">
            <h2 :style="`width: ${item.width}`" v-for="(item, index) in head" :key="index">
                {{ item.name }}
            </h2>
        </div>

        <vue3-seamless-scroll
            :list="list"
            :limitScrollNum="list.length"
            :hover="true"
            :singleHeight="31"
            :singleWaitTime="3000"
            :hover-stop="true"
            class="com-table-content"
        >
            <div class="com-table-item item" v-for="(item, index) in list" :key="index">
                <div :style="`width: ${head[0].width}`">{{ item.xh }}</div>
                <div :style="`width: ${head[1].width}`">{{ item.xTime }}</div>
                <div :style="`width: ${head[2].width}`">{{ item.content }}</div>
                <div :style="`width: ${head[3].width}`">
                    <span v-if="item.status == '1'" style="color: #ffdc68">未处理</span>
                    <span v-if="item.status == '2'" style="color: #71cd4c">已校验</span>
                    <span v-if="item.status == '3'" style="color: #71cd4c">已清洁</span>
                </div>
            </div>
        </vue3-seamless-scroll>
    </div>
</template>

<style scoped lang="scss">
.item {
    &:nth-child(2n-1) {
        background: url(./assets/img/rowBg.png) no-repeat;
        background-size: 100% 100%;
    }
}
</style>
